<template>
  <div>
    <table-form :form-schema="formSchema"  @onSubmit="onSubmit"> </table-form>
  </div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
import { FormButtonType, FormDataRowType, FormSchema } from "types/form";

const onSubmit = (data: any) => {
  console.log('data', data.name);
}

const formData = [{
    field: "name",
    type: "input",
    value: "",
    label: "名字",
    rule: [
      {
        required: true,
        message: "名字不能为空",
        trigger: "blur",
      },
      { min: 3, max: 5, message: "请输入3-5个字符", trigger: "blur" },
    ],
  },
  {
    field: 'state',
    type: 'select',
    value: '',
    label: '状态',
    options: [
      { label: '开', value: 1 },
      { label: '关', value: 0 },
    ]
  },
  {
    field: 'rich',
    type: 'richText',
    value: '',
    label: '富文本'
  }
] as FormDataRowType[]

const actions: FormButtonType[] = [
  { type: 'reset', title: '重置' },
  { type: 'submit', title: '提交', handleOperate: onSubmit }
]

const formSchema = reactive({
  formActions: actions,
  formData: formData
} as FormSchema)



</script>
<style></style>


  